<template>
    <!--包装盒子-->
    <div id='wrap'>
        <!--头部盒子  包含标题-->
        <div id='header'>
            <!--图片-->
            <div class='picture'>
                <img :src="info.activityImg || '../../images/main/details/index.png'" width="100%" height="100%" alt="">
                <!-- <span class='share'>分享会</span>  -->
                <span class='places'>仅剩{{content.participateMin}}个名额</span>
            </div>
            <!--标题-->
            <div class='title'>
                <h2>{{info.activityTitle}}</h2>
                <ul>
                    <li class='fright' >
                        <img src="../../images/main/details/unstart.png" width="15px" height="14px" alt="">
                        <sup>0</sup>
                    </li>
                    <li class='fright'>
                        <img src="../../images/main/details/see.png" width="17px" height="10px" alt="">
                        <sup>0</sup>
                    </li>
                    <li class='clr'></li>
                </ul>
            </div>
        </div>
        <!--主体内容-->
        <div id='content'>
            <!--详细信息-->
            <ul class='information'>
                <li><span><img src="../../images/main/details/money.png" width="100%" height="100%" alt=""></span>费用：{{content.activityPrice == '0' ? '免费' : '￥' + content.activityPrice}}</li>
                <li><span><img src="../../images/main/details/address.png" width="100%" height="100%" alt=""></span><div class="address" :title="content.activityAddress">地址：{{content.activityAddress}}</div></li>
                <li>
                    <span>
                        <img
                            src="../../images/main/details/time.png"
                            width="100%"
                            height="100%"
                            alt=""/>
                    </span>
                    时间：
                    <i style="font-size: 12px;display: inline-block;font-style: initial;white-space: nowrap;">
                        {{setDate(content.startTime)}}&ensp;&ensp;{{setTime(content.startTime)}}~{{setTime(content.time)}}
                    </i>
                </li>
                <li><span><img src="../../images/main/details/people.png" width="100%" height="100%" alt=""></span>适用年龄：{{content.ageks}}岁-{{content.agejs}}岁</li>
            </ul>
            <!--uncle魏小延-->
            <div class='experts' style="overflow: hidden;">
                <img
                    style="float: left;"
                    :src="$cookie.get('serviceLogo') || require('../../images/main/photo.png')"
                    alt=""
                />
                <div style="width: 280px;float: left;">
                    <h5> {{$cookie.get('serviceName')}}   <img src="../../images/main/details/atte.png" alt=""></h5>
                    <p>中国著名亲子教育专家，中国教育电视台《孕婴专家》栏目主讲，中国关心下一代委员会指定亲子教育讲师</p>
                </div>
            </div>
            <!--切换详情 评论 和 费用说明-->
            <div class='below'>
                <ul class='belowList'>
                    <li class='active'>详情</li>
                    <li>评论</li>
                    <li>费用说明</li>
                </ul>
                <div
                    class="content"
                    :style="{
                        padding: '20px 0',
                        textIndent: '2em'  
                    }"
                    v-html="content.details"
                    >
                </div>
                <!-- <p>活动评论 (<span>5</span>条)</p> -->
                <!--评论-->
               <!--  <ul class='comments'>
                    <li>
                        <h5>
                            <img src="../../images/main/message/user.png" alt="">
                            <span class='user'>uncle魏小延</span>
                            <span class='time'>10分钟前</span>
                        </h5>
                        <p>谢谢分享，请问地址在哪里
                            <ul class=userShape>
                                <li>
                                    <p>
                                        <span class='user'>uncle魏小延：</span>
                                        地址在河西区洞庭路青林大大厦大厦大厦大厦大厦
                                    </p>
                                </li>
                            </ul>
                        </p>
                        <div>
                            <img src="../../images/main/details/com.png" width="12px" height="10px" alt="">
                            <img src="../../images/main/details/heart.png" width="12px" height="11px" alt="">
                        </div>
                    </li>
                    <li>
                        <h5>
                            <img src="../../images/main/message/user.png" alt="">
                            <span class='user'>uncle魏小延</span>
                            <span class='time'>10分钟前</span>
                        </h5>
                        <p>谢谢分享，请问地址在哪里</p>
                        <div>
                            <img src="../../images/main/details/com.png" width="12px" height="10px" alt="">
                            <img src="../../images/main/details/heart.png" width="12px" height="11px" alt="">
                        </div>
                    </li>
                    <li>
                        <h5>
                            <img src="../../images/main/message/user.png" alt="">
                            <span class='user'>uncle魏小延</span>
                            <span class='time'>10分钟前</span>
                        </h5>
                        <p>谢谢分享，请问地址在哪里</p>
                        <div>
                            <img src="../../images/main/details/com.png" width="12px" height="10px" alt="">
                            <img src="../../images/main/details/heart.png" width="12px" height="11px" alt="">
                        </div>
                    </li>
                </ul> -->
            </div>
        </div>
        <!--底部导航栏-->
        <div id='footer'>
            <!--包含内容和报名按钮-->
            <ul>
                <li>
                    <img src="../../images/main/details/jx.png" alt="">
                    <span>精选</span>
                </li>
                <li>
                    <img src="../../images/main/details/fx.png" alt="">
                    <span>分享</span>
                </li>
                <li>
                    <img src="../../images/main/details/unstart.png" alt="">
                    <span>收藏</span>
                </li>
                <li>
                    <button>立即报名</button>
                </li>
            </ul>
            
        </div>
    </div>
</template>

<style type="text/scss" lang="scss" scoped>
    .content {
        
        /deep/ img {
            display: block;
            width: 100%;
        }
        
    }
</style>

<script>
export default {
    props: [ 'content' ],
    data () {
        return {
            info:{}
        }
    },
    created : function () {
        this.info= JSON.parse(sessionStorage.acInfo)
        console.log(JSON.parse(sessionStorage.acInfo))
    },
    watch: {
        acInfo: function (val) {
            console.log(val,'888')
        }
    },
    methods: {
        /**
       * 根据时间毫秒数 返回年月日
       */
      setDate: function(str) {
        let times = new Date(str)
        return `${times.getFullYear()}-${times.getMonth()+1 < 10 ?'0' + (times.getMonth() + 1) : times.getMonth()+1}-${times.getDate() < 10 ? '0' + times.getDate() : times.getDate()} `
      },
      /**
       * 根据时间毫秒数 返回时分秒
       */
      setTime: function(str) {
        let times = new Date(str)
        return `${times.getHours() < 10 ? '0' + times.getHours() : times.getHours()}:${times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes()}`
      },
    }
}
</script>
<style scoped>
@charset "utf-8";
html {
    white-space:normal; word-break:break-all;
}
body{font-family: Microsoft YaHei; font-size:12px; margin: 0; padding:0;letter-spacing: 0.5px;font-family:PingFangSC-Regular;}
ul,ol,dl,dt,dd,li{ margin:0; padding:0; list-style: none;}
h1,h2,h3{ margin:0; padding:0;}
img{border:0;}
a{ text-decoration:none;}
.clr{ clear:both}
.fleft{ float:left;}
.fright{ float:right;}

/*外面最大的盒子*/
#wrap{
    width:375px;
    margin:0 auto;
}
.content {
    white-space:normal;
    word-break:break-all;
}
/*图片和内容标题*/
#header .picture{
    position: relative;
    width:100%;
    height:204px;
}
.picture span{
    position: absolute;
    color:#fff;
    text-align: center;
}
/*左边*/
.picture .share{
    width:86px;
    height:43px;
    left:0;
    top:0;
    background: url("../../images/main/details/icon.png") no-repeat;
    line-height:43px;
}
/*右边*/
.picture .places{
    width:100px;
    height:43px;
    right:-15px;
    bottom:-6px;
    background: url("../../images/main/details/num.png");
    font-size:14px;
    line-height: 43px;
    transform: scale(0.7);
}

/*标题*/
.title{
    width:328px;
    margin:10px auto;
}
.title h2{
    width:328px;
    height:44px;
}
.title h2 span{
    color:#643296;
}
.title li{
    padding:3px 10px;
}
.title li sup{
    display: inline-block;
    color:#6e6e6e;
    font-size:10px;
    transform:scale(0.7);
    margin-left:-2px;

}
/*主体内容*/
#content{
    width:355px;
    margin:0 auto;
}

/*费用和地址的详细信息*/
.information{
    color:#4a4a4a;
}
.information li{
    padding:10px 0;
    
    border-bottom:1px solid #e6e6e6;
    

}
.address {
        width: 324px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    float: right;
    line-height: 22px;
}
.information span{
    display:inline-block;
    width:20px;
    height:20px;
    margin-right:10px;
    background-color:red;
    vertical-align: middle;
    border-radius:7px;
}

/*uncle魏小延 讲师部分介绍*/
.experts{
    margin-top:10px;
}
.experts div{
    display: inline-block;
    width:211px;
    margin-left:15px;
    vertical-align: middle;
}
.experts > img {
    width: 60px;
    height: 60px;
}
.experts p{
    line-height: 1.5em;
    letter-spacing:0.5px;
    color:#4a4a4a;
}
.experts div h5{
    margin:10px 0;
    font-weight: bold;
    font-size:14px;
}
.experts h5 img{
    margin-top:-3px;
}
.experts img{
    vertical-align: middle;
}

/*切换详情 评论 和 费用说明*/
.below{
    margin:35px auto 20px;
}
.belowList{
    overflow: hidden;
}
.belowList li{
    float:left;
    padding:10px 32px;
    font-weight:bold;
    font-size:16px;
}

/*表示选中状态*/
.belowList li.active{
    position: relative;
    color:#27ae18;
}
.belowList li.active::after{
    position: absolute;
    display:inline-block;
    content: '';
    width:45px;
    height:4px;
    left:0;
    bottom: 0;
    right:0;
    background-color:#27ae18;
    margin:0 auto;
}

/*活动评论*/
.below > p{
    margin-top: 20px;
    vertical-align: middle;
    font-weight: bold;
    font-size:14px;
    line-height: 17px;
}
.below > p::before{
    display:inline-block;
    content:'';
    margin-right:20px;
    background:#27ae18;
    width:5px;
    height:17px;
    text-align: left;
    vertical-align: middle;
}

/*评论的用户 时间 和内容*/
.comments > li{
    margin:15px 0 30px;
    padding-bottom: 30px;
    text-align: left;
    border-bottom:1px solid #e6e6e6;
}
.comments > li h5{
    font-size:14px;
}
.comments div{
    text-align: right;
}
.comments div img{
    margin:0 5px;
}
.comments img{
    vertical-align: middle;
}
.comments .time{
    margin-left:120px;
    color:#727272;
    font-size:12px;
    font-weight:bold;
}

/*评论的内容*/
.comments > li > p{
    width:282px;
    margin:0 auto;
    color:#414141;
}
.comments h5 img{
    width:37px;
    height:37px;
    border-radius: 50%;
}

/*评论区回复别人的内容和用户名*/
.userShape li{
    width:272px;
    margin: 0 auto;
    line-height:1.5em;
    color:#414141;
}

/*底部导航*/
#footer {
    width:328px;
    margin:0 auto;
}
#footer ul{
    display: inline-block;

}
#footer ul:after{
    display:inline-block;
    content: '';
    clear:both;
}
#footer ul li{
    float:left;
    width:37px;
    padding:0 6px;
    margin:0 10px;
    color:#888;
    text-align: center;
    font-size: 14px;
}
#footer span{
    display:block;
    margin-top:5px;
}
/*图片大小*/
#footer img{
    width:20px;
    height:20px;
}
/*按钮*/
#footer button{
    width:127px;
    height:57px;
    margin-top:-10px;
    padding:16px 20px;
    color:#fff;
    background:#27ae18;
    font-size:16px;
    font-weight: bold;
    border:0;
    vertical-align: middle;
}









</style>
